<script setup lang="ts" name="Dep">
import { ref, onMounted, computed } from 'vue'
import type { TopDep } from '@/types/consult'
import { getAllDep } from '@/api/consult'
import { useConsultStore } from '@/stores'
const active = ref(0)
const list = ref<TopDep[]>([])
const store = useConsultStore()
onMounted(async () => {
  const res = await getAllDep()
  list.value = res.data
})
// 根据变化的active，计算出右边对应的二级科室数组
const subDeps = computed(() => {
  // ? 可选链操作符
  // return list.value[active.value]?.child
  return list.value[active.value] && list.value[active.value].child
})
</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="wrapper">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="item in list" :key="item.id" :title="item.name" />
      </van-sidebar>
      <div class="sub-dep">
        <router-link
          to="/consult/illness"
          @click="store.setDepId(subitem.id)"
          v-for="subitem in subDeps"
          :key="subitem.id"
          >{{ subitem.name }}</router-link
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
  width: 114px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    &--select {
      color: var(--cp-main);
      font-weight: normal;
      &::before {
        display: none;
      }
    }
  }
}
.wrapper {
  height: 100vh;
  overflow: hidden;
  display: flex;
  .sub-dep {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    > a {
      display: block;
      padding: 14px 30px;
      color: var(--cp-dark);
    }
  }
}
</style>
